<template>
	<view class="main">
		<view class="card">
			<view class="input-item">
				<view>意见反馈</view>
				<textarea placeholder="请详细输入你的诉求" v-model="content">
					</textarea>
			</view>
			<view style="margin-top: 20rpx;">
				<view class="flex align wrap">
					<view style="margin-right: 20rpx;position: relative;" v-for="(item,index) in images" :key="index">
						<image :src="item.path" style="width: 150rpx;height: 150rpx;"></image>
						<view @click="toDel(index)" style="position: absolute;top: 0;right: 0;">
							<u-icon name="close-circle-fill" color="#aa0000" size="25"></u-icon>

							<!-- <uni-icons type="clear" color="#aa0000" size="25"></uni-icons> -->
						</view>
					</view>
				</view>
				<view class="loadUp" @click="toUpload()">
					<image src="/static/up.png"></image>
				</view>
				<view style="font-size: 32rpx;margin-top: 21rpx;">上传图片（选填）</view>
			</view>
			<view class="resign-btn" @click="toSubmit()">提交</view>
			<!-- <navigator url="/pages/suggest/record" class="resign-btn" hover-class="none" style="background: #ff5200;">我有建议</navigator> -->
		</view>
	</view>
</template>

<script>
	import {
		feedbackSubmit
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				imageValue: [],
				logo: '',
				business_license: '',
				items: [],
				region: [],
				date: '',
				title: '',
				money: '',
				content: '',
				juridical_person: '',
				mobile: '',
				area: '',
				realname: '',
				password: '',
				role_id: '',
				role_S: false,
				images: [],
				list: [],
				barHeight: '',
				ws: null,
				path: '/pages/suggest/suggest'
			};
		},
		onLoad() {

		},
		onShow() {
			this.connectWebSocket()
		},
		created() {

		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		methods: {
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				that.ws = new WebSocket(wsUrl);
				that.ws.onopen = () => {
					//console.log("连接已建立");
					// 这里可以发送初始化消息等
					that.sendData({
						type: 'page_enter',
						path: that.path,
						params: ""
					});
				};
				that.ws.onmessage = (event) => {
					console.log("Message from server ", event.data);
					// 处理接收到的消息
				};
				that.ws.onerror = (error) => {
					console.error("连接失败: ", error);
				};
				that.ws.onclose = () => {
					console.log("连接失败，重新连接");
					// 可以在这里尝试重新连接
					that.connectWebSocket();
				};
			},
			// 发送
			sendData(data) {
				if (this.ws && this.ws.readyState === WebSocket.OPEN) {
					// this.ws.send(data); // 确保发送JSON格式的数据
					this.ws.send(JSON.stringify(data)); // 确保发送JSON格式的数据
				} else {
					console.error("WebSocket is not open");
				}
			},
			toback() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			xieyi() {
				uni.navigateTo({
					url: '/pages/xieyi/register_info'
				});
			},
			yinsi() {
				uni.navigateTo({
					url: '/pages/xieyi/private_policy'
				});
			},
			// 初始化的时候调用参数，判断用户是否第一次进入
			judge() {
				uni.getStorage({
					key: 'agreement_key',
					success: () => {
						// 获取到了不显示弹窗
						this.$refs.alertDialog.close();
					},
					fail: () => {
						this.$refs.alertDialog.open()
					}
				})
			},
			// 同意按钮
			admit() {
				try {
					uni.setStorageSync('agreement_key', 'yes');
					uni.setStorageSync('agreement_Date', new Date().toLocaleString())
				} catch (e) {
					//TODO handle the exception
				}
				this.$refs.alertDialog.close();
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			onchange(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.region = arr
			},
			toUpload(i) {
				console.log(i)
				let that = this
				let token = uni.getStorageSync('token')
				uni.chooseImage({
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async (res) => {
						const tempFilePaths = res.tempFilePaths;
						console.log(res)
						console.log(tempFilePaths)
						tempFilePaths.forEach(item => {
							console.log(item)
							uni.uploadFile({
								url: 'https://gxtravel.ncscloudmedia.com/index.php/api/upload/file', // 你的上传图片的API接口
								filePath: item,
								header: {
									'token': token
								},
								name: 'file', // 这里根据API的要求来，可能需要指定文件对应的字段名
								success: function(uploadFileRes) {
									console.log(JSON.parse(uploadFileRes
										.data)); // 上传成功后的操作
									let datasStr = JSON.parse(uploadFileRes.data)
									that.images.push({
										url: datasStr.data.path,
										path: datasStr.data.url,
									})
									console.log(that.images)
								},
								fail: function(uploadFileErr) {
									console.log(uploadFileErr); // 上传失败后的操作
								}
							});
						})

					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			async checkToken() {
				const result = await checkToken2()
				if (result.code == 1) {

				} else {
					uni.navigateTo({
						url: '/pages/login/login?type=1'
					})
				}
			},
			deletes(e) {
				const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
				this.imageValue.splice(num, 1);
			},
			toDel(e) {
				const num = this.images.findIndex(v => v.url === e.tempFilePath);
				this.images.splice(num, 1);
			},
			// 提交
			async toSubmit() {
				let imgs = []
				if (this.images.length != 0) {
					this.images.forEach(item => {
						imgs.push(item.url)
					})
				}
				let obj = {
					content: this.content,
					images: imgs.toString(),
				}
				if (obj.content == '') {
					uni.showToast({
						title: '请输入反馈内容',
						icon: 'error'
					})
					return false
				}
				console.log(obj)
				const result = await feedbackSubmit(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async getInfo() {
				const result = await companyInfo()
				if (result.code == 1) {
					this.role_id = result.data.role_id
					let arr = result.data.permission_list
					if (arr.length != 0) {
						arr.forEach(item => {
							if (item.permission_mark == 'storeManage') {
								this.role_S = true
							}
						})
					}

				} else {

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}

	.line {
		/* line-height: 18px; */
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
		vertical-align: middle;
		font-weight: normal
	}

	.agreement-view {
		margin-top: 20px;
		box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
		border-radius: 20rpx;
		padding: 20rpx 0rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		width: 300px;
		height: 200rpx;
		align-items: center;
		/* justify-content: center; */
		background-color: #fff;
	}

	.u-text-center {
		font-size: 15px;
		padding-bottom: 20rpx;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 600;
		width: 100%;
		height: 30px;
		text-align: center;
	}

	.agreement-content {
		overflow-y: scroll;
		padding: 0rpx 40rpx 10rpx 40rpx;
	}

	.agreement-btns {
		width: 100%;
		/* height: 85rpx; */
		display: flex;
		flex-direction: row;
	}

	.yse-btn {
		color: #fff;
		background-color: red;
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 20rpx 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.no-btn {
		/* background-color: aquamarine; */
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 0 20rpx;
	}

	.text {
		line-height: 46px;
	}

	.main {
		margin: 24rpx;
		padding-bottom: 10rpx;

		.card {
			border-radius: 12rpx;
			padding: 10rpx 24rpx 10rpx;
			margin-bottom: 20rpx;


			.loadUp {
				margin-top: 20rpx;

				image {
					width: 96rpx;
					height: 96rpx;
				}

			}

			.logo {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}



			.input-item {
				padding: 19rpx 0;
				border-bottom: solid 1rpx #D9D9D9;
				font-size: 28rpx;

				view {
					width: 30%;
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}

				input,
				textarea {
					font-size: 28rpx;
				}

				textarea {
					background: #EEEEEE;
					border-radius: 4rpx;
					padding: 18rpx 20rpx;
				}
			}
		}

		.resign-btn {
			background: #00AF91;
			border-radius: 32rpx;
			font-size: 26rpx;
			font-weight: bold;
			line-height: 72rpx;
			color: white;
			margin: 50rpx auto;
			text-align: center;
		}
	}

	.card-tit {
		font-size: 28rpx;
		font-weight: bold;
		padding: 20rpx 0;

		text {
			background: #C23015;
			display: block;
			width: 9rpx;
			height: 35rpx;
			margin-right: 10rpx;
			border-radius: 5rpx;
		}
	}

	.list {
		background: white;
		padding: 16rpx 24rpx;
		margin-bottom: 24rpx;

		.list-name {
			font-size: 24rpx;
			font-weight: bold;
		}

		.time {
			margin-top: 19rpx;
		}

		.status {
			background: #FFCF7D;
			width: 86rpx;
			line-height: 41rpx;
			border-radius: 4rpx;
			color: #E38F00;
			font-size: 18rpx;
			text-align: center;
		}
	}
</style>